<template>
  <div>
    <van-nav-bar
      title="攻略详情"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    <div class="head_box">
      <img :src="row.s_icon">
    </div>
    <div class="cont_box">
      <h1 class="name">{{row.s_name}}</h1>
      <h1 class="c_time">{{row.s_createTime}}</h1>
      <div class="user">
        <div class="u_icon">
          <img :src="row.s_userIcon"/>
        </div>
        <div class="u_name">
          {{row.s_userName}}
        </div>
      </div>
    </div>
    <div class="text_box" v-html="row.s_text"></div>
    <van-nav-bar
      title="谢谢您的阅读"
      right-text="返回"
      @click-right="onClickLeft"
    />
  </div>
</template>

<script>
  export default{
    data(){
      return{
        id:null,
        row:null
      }
    },
    methods:{
      onClickLeft:function(){
        this.$router.push({path:'/'});
      },
      onLoad:function(){
        var that=this

        var toast_load=this.$toast.loading({
          message: '加载中...',
          forbidClick: true,
          duration:0
        });

        this.$axios.post('/index.php/strategy/row',this.$qs.stringify({id:this.id})).then(
          (res)=>{
            if(res.data.code==1){
              toast_load.clear();

              that.row=res.data.data.row;
            }else{
              toast_load.clear();

              that.$toast.fail(res.data.msg);

              setTimeout(function(){that.onClickLeft},1300);
            }
          }
        ).catch(
          (res)=>{
            that.$toast.fail('网络繁忙');
          }
        )
      }
    },
    created(){
      this.id=typeof(this.$route.query.id)

      if(this.id!='undefined'){
        this.id=this.$route.query.id;

        this.onLoad();
      }
    }
  }
</script>

<style scoped>
  .head_box{
    width:100%;
    height:450rem;
  }
  .head_box img{
    width:100%;
    height:100%;
  }
  .cont_box{
    padding:40rem;
  }
  .cont_box .name{
    height:100rem;
    font-size:58rem;
    color:#444;
    margin-bottom:20rem;
  }
  .cont_box .c_time{
    font-size:24rem;
  }
  .cont_box .user{
    margin:20rem 0;
    display:flex;
  }
  .cont_box .user .u_icon{
    width:120rem;
    height:120rem;
    border-radius:120rem;
    overflow: hidden;
  }
  .cont_box .user .u_icon img{
    width:120rem;
    height:120rem;
  }
  .cont_box .user .u_name{
    font-size:34rem;
    color:#696969;
    margin-left:18rem;
    margin-top:15rem;
  }
  .text_box{
    padding:20rem;
    font-size:38rem !important;
  }
  .text_box >>> img{
    width:720rem !important;
  }
</style>
